<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2013 The Native Client Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
<head>
  <title>Snes9x</title>
  <script type="text/javascript" src="snes9x.js"></script>
  <style>
    .icon {
      margin: 1px;
      text-align: center;
    }
    .circle {
      border-radius: 0.75em;
      display: inline-block;
      height: 1.5em;
      line-height: 1.5em;
      width: 1.5em;
    }
    .circle.dark {
      background-color: #483b8a;
      color: #949cc3;
    }
    .circle.light {
      background-color: #949cc3;
      color: #483b8a;
    }
    .capsule {
      font-size: 8px;
      color: #ccc;
      background-color: #353736;
      border-radius: 0.25em;
      display: inline-block;
      height: 0.6em;
      -webkit-transform: rotate(-40deg);
      width: 1.7em;
    }
    .shoulder {
      color: #483b8a;
      display: inline-block;
      height: 0.8em;
      width: 1.7em;
      background-color: #a1a3a2;
      line-height: 0.8em;
    }
    .shoulder.left {
      border-radius: 0.6em 0 0 0;
    }
    .shoulder.right {
      border-radius: 0 0.6em 0 0;
    }
    .dpad {
      background-color: #424345;
      display: inline-block;
      width: 1.3em;
      height: 1.3em;
      border: 0.2em transparent;
      border-radius: 0.3em 0.3em 0 0;
    }
    .dpad:after {
      border-bottom: 0.9em solid #5c5c5c;
      border-left: 0.45em solid transparent;
      border-right: 0.45em solid transparent;
      content: "";
      display: inline-block;
      height: 0.1em;
      width: 0;
    }
    .dpad.right {
      -webkit-transform: rotate(90deg);
    }
    .dpad.down {
      -webkit-transform: rotate(180deg);
    }
    .dpad.left {
      -webkit-transform: rotate(270deg);
    }
    table {
      border-collapse: collapse;
      font-family: sans-serif;
      font-size: 12px;
      text-align: center;
      margin-bottom: 1em;
    }
    tr {
      border-bottom: 1px solid #ccc;
    }
    th, td {
      border-right: 1px solid #ccc;
      padding: 2px;
    }
    .player {
      background-color: #283;
      border-radius: 0.5em;
      box-shadow: 0 -1px 0 rgba(0,0,0,0.25);
      color: #fff;
      display: inline-block;
      font-family: monospace;
      font-weight: bold;
      line-height: 0.8em;
      padding: 0.3em;
    }
  </style>
</head>
<body>
  <label for="romfile">Select ROM (*.smc): </label>
  <input type="file" id="romfile">
  <div id="listener"></div>
  <table>
    <thead>
      <td></td>
      <th><span class="icon dpad up"></span></th>
      <th><span class="icon dpad left"></span></th>
      <th><span class="icon dpad right"></span></th>
      <th><span class="icon dpad down"></span></th>
      <th><span class="icon capsule"></span>START</th>
      <th><span class="icon capsule"></span>SELECT</th>
      <th><span class="icon circle dark">A</span></th>
      <th><span class="icon circle dark">B</span></th>
      <th><span class="icon circle light">X</span></th>
      <th><span class="icon circle light">Y</span></th>
      <th><span class="icon shoulder left">L</span></th>
      <th><span class="icon shoulder right">R</span></th>
    </thead>
    <tr>
      <td><span class="player">P1</span></td>
      <td>U,Up</td>
      <td>H,Left</td>
      <td>K,Right</td>
      <td>J,N,Down</td>
      <td>Return</td>
      <td>Space</td>
      <td>D</td>
      <td>C</td>
      <td>S</td>
      <td>X</td>
      <td>A,V</td>
      <td>Z</td>
    </tr>
    <tr>
      <td><span class="player">P2</span></td>
      <td>KP 8</td>
      <td>KP 4</td>
      <td>KP 6</td>
      <td>KP 2</td>
      <td>KP Enter</td>
      <td>KP Add</td>
      <td>PgUp</td>
      <td>PgDn</td>
      <td>Home</td>
      <td>End</td>
      <td>Ins</td>
      <td>Del</td>
    </tr>
  </table>
  <table>
    <thead>
      <th></th>
      <th>Slot 1</th>
      <th>Slot 2</th>
      <th>Slot 3</th>
      <th>Slot 4</th>
      <th>Slot 5</th>
      <th>Slot 6</th>
      <th>Slot 7</th>
      <th>Slot 8</th>
      <th>Slot 9</th>
    </thead>
    <tr>
      <td>QuickLoad</td>
      <td>F1</td>
      <td>F2</td>
      <td>F3</td>
      <td>F4</td>
      <td>F5</td>
      <td>F6</td>
      <td>F7</td>
      <td>F8</td>
      <td>F9</td>
    </tr>
    <tr>
      <td>QuickSave</td>
      <td>Shift+F1</td>
      <td>Shift+F2</td>
      <td>Shift+F3</td>
      <td>Shift+F4</td>
      <td>Shift+F5</td>
      <td>Shift+F6</td>
      <td>Shift+F7</td>
      <td>Shift+F8</td>
      <td>Shift+F9</td>
    </tr>
  </table>
</body>
</html>
